<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>天气数据分析可视化</title>
    <meta content="Responsive admin theme build on top of Bootstrap 4" name="description">

    <link href="/static/static/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <!--Morris Chart CSS -->
    <link rel="stylesheet" href="/static/static/css/morris.css">
    <link href="/static/static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/metismenu.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="header-bg">
    <!-- Navigation Bar-->
    <header id="topnav">
        <div class="topbar-main" style="background-color: #1D84DE">
            <div class="container-fluid">

                <!-- Logo-->
                <div>
                    <a href="" class="logo" style="display: flex;margin-top: 10px">
                        <img src="../static/static/weathericon/方块.png" style="width: 40px; height: 40px;margin-top: 5px;margin-right: 5px">
                        <h3 style="color: white">天气数据分析可视化</h3>
                    </a>
                </div>
                <!-- End Logo-->

                <div class="menu-extras topbar-custom navbar p-0">

                    <!-- Search input -->
                    <div class="search-wrap" id="search-wrap">
                        <div class="search-bar">
                            <input class="search-input" type="search" placeholder="Search">
                            <a href="#" class="close-search toggle-search" data-target="#search-wrap">
                                <i class="mdi mdi-close-circle"></i>
                            </a>
                        </div>
                    </div>

                    <ul class="navbar-right ml-auto list-inline float-right mb-0">

                        <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                            <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                <i class="fas fa-expand noti-icon" style="color: white"></i>
                            </a>
                        </li>
                        <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                            <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                <h5 style="color: #fff">
                                    {{ userInfo.username }}
                                </h5>
                            </a>
                        </li>
                        <!-- notification -->

                        <li class="dropdown notification-list list-inline-item">
                            <div class="dropdown notification-list nav-pro-img">
                                <a class="dropdown-toggle nav-link arrow-none waves-effect nav-user"
                                   data-toggle="dropdown" href="#" role="button" aria-haspopup="false"
                                   aria-expanded="false">
                                    <img src="/static/static/picture/user-1.jpg" alt="user" class="rounded-circle">
                                </a>
                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown">
                                    <!-- item-->

                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item " href="/userApp/logOut"><i
                                            class="mdi mdi-power"></i> 退出登录</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item " href="/userApp/userinfo"><i
                                            class="ion-ios-add-circle-outline"></i> 个人信息</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="/userApp/pwdchange"><i
                                            class="ion-ios-trophy"></i> 密码修改</a>
                                </div>
                            </div>
                        </li>

                        <li class="menu-item dropdown notification-list list-inline-item">
                            <!-- Mobile menu toggle-->
                            <a class="navbar-toggle nav-link">
                                <div class="lines">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </a>
                            <!-- End mobile menu toggle-->
                        </li>

                    </ul>

                </div>
                <!-- end menu-extras -->

                <div class="clearfix"></div>

            </div>
            <!-- end container -->
        </div>
        <!-- end topbar-main -->


        <!-- MENU Start -->
        <div class="navbar-custom">
            <div class="container-fluid">

                <div id="navigation">

                    <!-- Navigation Menu-->
                    <ul class="navigation-menu">

                        <li class="has-submenu">
                            <a href="/userApp/index"><i class="dripicons-home"></i> 首页</a>
                        </li>
                        <li class="has-submenu">
                            <a href="#"><i class="dripicons-view-thumb"></i> 城市数据分析</a>
                            <ul class="submenu">
                                <li><a href="/userApp/CityData">年度分析</a></li>
                                <li><a href="/userApp/CityMonth">月份分析</a></li>
                            </ul>

                        </li>


                        <li class="has-submenu">
                            <a href="#"><i class="dripicons-view-list"></i> 全国数据分析</a>
                            <ul class="submenu">
                                <li><a href="/userApp/monthTempChar">月温度分析</a></li>
                                <li><a href="/userApp/monthAirCha">月份空气质量</a></li>

                            </ul>

                        </li>
                        <li class="has-submenu">
                            <a href="/userApp/screen?user=true"><i class="dripicons-map"></i> 历史数据大屏</a>
                        </li>

                        <li class="has-submenu">
                            <a href="/userApp/chatAI"><i class="dripicons-network-2"></i> 智能问答</a>
                        </li>

                        <li class="has-submenu">
                            <a href="/userApp/weather_deatil_view"><i class="dripicons-view-thumb"></i> 详情信息</a>

                        </li>


                        <li class="has-submenu">
                            <a href="/userApp/weatherforecast/"><i class=" dripicons-star"></i>天气预测</a>
                        </li>
                    </ul>
                    <!-- End navigation menu -->
                </div>
                <!-- end #navigation -->
            </div>
            <!-- end container -->
        </div>
        <!-- end navbar-custom -->
    </header>
    <!-- End Navigation Bar-->

</div>
<!-- header-bg -->

<div class="wrapper" style="padding-top: 30px">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">

                        <h4 class="header-title">用户信息展示与修改</h4>

                        <!-- Begin: User Information Section -->
                        <div class="user-info">
                            <!-- 用户信息展示与修改表单 -->
                            <form method="POST" action="{% url 'userinfo' %}">
                                {% csrf_token %}
                                <!-- 表单字段 -->
                                <div class="info-row">
                                    <span class="info-label">用户名:</span>
                                    <span class="info-field">
                    <input type="text" name="username" value="{{ userInfo.username }}" required>
                </span>
                                </div>
                                <!-- 其他字段类似 -->
                                <!-- Email -->
                                <div class="info-row">
                                    <span class="info-label">电子邮箱:</span>
                                    <span class="info-field" id="emailField">
     <input type="text" name="email" value="{{ userInfo.email }}" required>
        </span>
                                </div>

                                <!-- Phone Number -->
                                <div class="info-row">
                                    <span class="info-label">电话号码:</span>
                                    <span class="info-field" id="phoneNumberField">
             <input type="text" name="phoneNumber" value="{{ userInfo.phone_number }}" required>
        </span>
                                </div>

                                <!-- Address -->
                                <div class="info-row">
                                    <span class="info-label">地址:</span>
                                    <span class="info-field" id="addressField">
             <input type="text" name="address" value="{{ userInfo.address }}" required>
        </span>
                                </div>

                                <!-- Age -->
                                <div class="info-row">
    <span class="info-label">出生日期:</span>
    <span class="info-field" id="ageField">
        <input type="date" name="birthday" value="{{ userInfo.birthday|date:'Y-m-d' }}" required>
    </span>
</div>
                                <div class="edit-actions">
                                    <button type="submit" class="btn btn-primary">保存修改</button>
                                </div>
                            </form>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- end container-fluid -->
</div>
<!-- end wrapper -->


<style>

    .swiper {
        width: 100%;
        height: calc(100vh - 131px);
    }

    .swiper-slide {
        height: 100%;
    }

    .wrapper {
        padding-top: 0;
    }

    body {
        padding-bottom: 0;
    }

    html {
        overflow-x: hidden;
        position: relative;
        min-height: 100%;
    {#overflow-y: hidden;#}
    }

    .user-info {
        margin: 20px;
        padding: 20px;
        border: 1px solid #e5e5e5;
        border-radius: 5px;
        background-color: #f8f9fa;
    }

    .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .info-label {
        font-weight: bold;
        width: 30%;
    }

    .info-field {
        width: 60%;
    }

    .info-field input {
        width: 100%;
        padding: 8px;
    }

    .edit-actions {
        margin-top: 15px;
    }
</style>
<!-- End Footer -->

<!-- jQuery  -->
<script src="/static/static/js/jquery.min.js"></script>
<script src="/static/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/static/js/jquery.slimscroll.js"></script>
<script src="/static/static/js/waves.min.js"></script>

<!-- Plugins js -->
<script src="/static/static/js/apexcharts.min.js"></script>
<script src="/static/static/js/bootstrap-datepicker.min.js"></script>
<script src="/static/static/js/swiper-bundle.min.js"></script>
<!--Morris Chart-->
<script src="/static/static/js/morris.min.js"></script>
<script src="/static/static/js/raphael.min.js"></script>

<script src="/static/static/js/dashboard.init.js"></script>

<!-- App js -->
<script src="/static/static/js/app.js"></script>

<script src="/static/static/js/echarts.js"></script>
<script src="/static/static/js/china.js"></script>

</body>
<script>
</script>
</html>